<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="证书名称:">
            <el-input
              size="small"
              clearable
              v-model="competitionPrize.certificateName"
              placeholder="请输入证书名称"
              prefix-icon="el-icon-edit"
            />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="证书级别:">
            <el-select
              v-model="competitionPrize.level"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="学生年级:">
            <el-input
              size="small"
              clearable
              v-model="competitionPrize.grade"
              placeholder="如：20级"
              prefix-icon="el-icon-edit"
            />
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="学生姓名:">
            <el-input
              size="small"
              clearable
              v-model="competitionPrize.stuName"
              placeholder="学生姓名"
              prefix-icon="el-icon-edit"
            />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="指导教师:">
            <el-input
              size="small"
              clearable
              v-model="competitionPrize.teacher"
              placeholder="如：李丹"
              prefix-icon="el-icon-edit"
            />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="拿证时间:">
            <el-date-picker
              v-model="competitionPrize.time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row style="display: flex; justify-content: center">
      <el-button type="primary" @click="handleCompetitionPrizeAddBtn"
        >提交</el-button
      >
      <el-button type="warning" @click="handleCompetitionPrizeResetBtn"
        >清空</el-button
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "AddCertificates",
  // 接受父类传过来的urls
  props: {
    fileList: {
      Type: Array,
      default: () => {
        return [];
      },
    },
    urls: {
      Type: Array,
      default: () => {
        return [];
      },
    },
    userId: 0,
  },
  data() {
    return {
      /**
       * 资格证书
       */
      competitionPrize: {
        certificateName: "",
        grade: "",
        id: 0,
        level: "",
        stuName: "",
        teacher: "",
        time: "",
        url: "",
        userId: 0,
      },
      options: [
        {
          value: "校级",
          label: "校级",
        },
        {
          value: "省级",
          label: "省级",
        },
        {
          value: "国家级",
          label: "国家级",
        },
      ],
    };
  },
  methods: {
    /**
     * 点击竞赛奖励的提交按钮触发事件
     **/
    handleCompetitionPrizeAddBtn() {
      // 上传了图片但是没保存，提示用户保存
      if (this.fileList.length != 0 && this.urls.length === 0) {
        this.$message({
          message: "图片未保存，请先保存哦",
          type: "warning",
        });
      } else {
        this.$confirm("确定要提交吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }).then(() => {
          this.competitionPrize.userId = this.userId;
          this.competitionPrize.url = this.urls.join(";");
          this.postRequest(
            "/certificates",
            this.competitionPrize
          );
          this.competitionPrize = {};
          this.$emit("clearUrl");
        });
      }
    },
    /**
     * 点击竞赛奖励的取消按钮触发事件
     **/
    handleCompetitionPrizeResetBtn() {
      this.competitionPrize = {};
    },
  },
};
</script>

<style scoped></style>
